// Dropdowns
//
// The dropdown uses twbs's scss.
//
// PHP rendering: Use the `dropdown-twbs` view using the Dropdown Module.
//
// Styleguide 14.

// Dropdown Menu
//
// Here's the default dropdown menu markup.
//
// Markup:
// <div class="dropdown">
//   <button id="dropdownMenu" class="dropdown-toggle btn btn-icon-border" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
//     <svg class="icon icon-16" viewBox="0 0 16 16">
//       <use xlink:href="#code-bubble"></use>
//     </svg>
//   </button>
//   <div class="dropdown-menu role="menu" aria-labelledby="dropdownMenu" {{modifier_class}}">
//     <a role="menuitem" class="dropdown-item" tabindex="-1" href="#">Option</a>
//     <a role="menuitem" class="dropdown-item disabled" tabindex="-1" href="#">Disabled Option</a>
//     <div class="dropdown-divider"></div>
//     <div class="dropdown-header">Display as</div>
//     <a role="menuitem" class="dropdown-item" tabindex="-1" href="#">
//       <svg class="icon icon-16 icon-discussions" viewBox="0 0 16 16">
//         <use xlink:href="#question-mark"></use>
//       </svg>
//       Help
//     </a>
//   </div>
// </div>
//
// Styleguide 14.1.

// Dropdown Menu Right-aligned
//
// Opens with the right side of the dropdown menu aligned the right of the root dropdown div.
//
// PHP rendering: If you want the dropdown menu to open right, set the Dropdown Module's `listCssClass` to
// `dropdown-menu-right`.
//
// Markup:
// <div class="dropdown clearfix">
//   <button id="dropdownMenu" class="dropdown-toggle pull-right btn btn-icon-border" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
//     <svg class="icon icon-16" viewBox="0 0 16 16">
//       <use xlink:href="#code-bubble"></use>
//     </svg>
//   </button>
//   <div class="dropdown-menu dropdown-menu-right role="menu" aria-labelledby="dropdownMenu" {{modifier_class}}">
//     <a role="menuitem" class="dropdown-item" tabindex="-1" href="#">Option</a>
//     <a role="menuitem" class="dropdown-item disabled" tabindex="-1" href="#">Disabled Option</a>
//     <div class="dropdown-divider"></div>
//     <div class="dropdown-header">Display as</div>
//     <a role="menuitem" class="dropdown-item" tabindex="-1" href="#">
//       <svg class="icon icon-16 icon-discussions" viewBox="0 0 16 16">
//         <use xlink:href="#question-mark"></use>
//       </svg>
//       Help
//     </a>
//   </div>
// </div>
//
// Styleguide 14.2.

// Dropup Variation
//
// PHP rendering: If you want the dropdown menu to open up, set the Dropdown Module's `cssClass` property to `dropup`.
//
// .dropup - Opens up instead of down.
//
// Markup:
// <div class="dropdown {{modifier_class}}">
//   <button id="dropdownMenu" class="dropdown-toggle btn btn-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
//     Trigger
//   </button>
//   <div class="dropdown-menu role="menu" aria-labelledby="dropdownMenu">
//     <a role="menuitem" class="dropdown-item" tabindex="-1" href="#">Option</a>
//     <a role="menuitem" class="dropdown-item disabled" tabindex="-1" href="#">Disabled Option</a>
//     <div class="dropdown-divider"></div>
//     <div class="dropdown-header">Display as</div>
//     <a role="menuitem" class="dropdown-item" tabindex="-1" href="#">
//       <svg class="icon icon-16" viewBox="0 0 16 16">
//         <use xlink:href="#question-mark"></use>
//       </svg>
//       Help
//     </a>
//   </div>
// </div>
//
// Styleguide 14.3.

.dropdown-toggle {
    cursor: pointer;
}

.dropdown-menu {
    padding: ($spacer-y * 0.5) 0;

    .icon {
        margin-right: $spacer * 0.25;
    }

    svg.icon {
        margin-top: -2px;
    }

    .dropdown-item.disabled {
        color: lighten($grey, 20%);
    }
}

.dropup .dropdown-toggle::after {
    border-top: 0.375em solid;
    border-bottom: 0;
}

// btn-groups transform into dropdowns when they get too wide for their container.
// This styles that specific dropdown trigger button.

.dropdown-filter .btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: 120px;
}
